<template>
  <view>
    <view class="search_box_cont">
      <view class="search_box" @click="searchBoxHandler">
        <uni-icons type="search" size="17"></uni-icons>
        <text class="placeholder">搜索</text>
      </view>
    </view>
    <swiper :autoplay="true" :indicator-dots="true" circular>
      <swiper-item v-for="(item, index) in lunboList" :key="index">
        <navigator :url="'/subpkg/good_details/good_details?goods_id=' + item.goods_id"><img :src="item.image_src" alt="" srcset="" /></navigator>
      </swiper-item>
    </swiper>
    <view class="fenlei">
      <view v-for="(item, index) in fenleiList" :key="index" @click="fenleiTo(item.name)"><img :src="item.image_src" alt="" srcset="" /></view>
    </view>
    <view class="louList">
      <view class="lou" v-for="(item, index) in louList" :key="index">
        <view class="lou_title"><img :src="item.floor_title.image_src" alt="" srcset="" mode="widthFix" /></view>
        <view class="lou_con">
          <view class="lou_con_left">
            <img
              :src="item.product_list[0].image_src"
              alt=""
              srcset=""
              :style="'width:' + item.product_list[0].image_width + 'rpx'"
              mode="widthFix"
              @click="imgTo(item.product_list[0].name)"
            />
          </view>
          <view class="lou_con_right">
            <img
              :src="items.image_src"
              alt=""
              srcset=""
              v-for="(items, i) in item.product_list"
              :key="i"
              v-if="i !== 0"
              :style="'width:' + items.image_width + 'rpx'"
              mode="widthFix"
              @click="imgTo(items.name)"
            />
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      lunboList: [],
      fenleiList: [],
      louList: []
    }
  },
  methods: {
    async getlunboList() {
      const { data: res } = await uni.$http.get('/api/public/v1/home/swiperdata')
      // console.log(res);
      if (res.meta.status !== 200) {
        return uni.$showMsg()
      }
      this.lunboList = res.message
    },
    async getfenleiList() {
      const { data: res } = await uni.$http.get('/api/public/v1/home/catitems')
      // console.log(res);
      if (res.meta.status !== 200) {
        return uni.$showMsg()
      }
      this.fenleiList = res.message
    },
    // 分类跳转
    fenleiTo(val) {
      if (val === '分类') {
        uni.switchTab({
          url: '/pages/cate/cate'
        })
      }
    },
    async getlouiList() {
      const { data: res } = await uni.$http.get('/api/public/v1/home/floordata')
      // console.log(res);
      if (res.meta.status !== 200) {
        return uni.$showMsg()
      }
      this.louList = res.message
    },
    imgTo(name) {
      uni.navigateTo({
        url: '/subpkg/good_list/good_list?' + name
      })
    },
    // 搜索框点击事件
    searchBoxHandler() {
      uni.navigateTo({
        url: '/subpkg/search/search'
      })
    }
  },
  onLoad() {
    this.getlunboList(), this.getfenleiList(), this.getlouiList()
  }
}
</script>

<style lang="scss">
swiper-item {
  navigator {
    width: 100%;
    height: 100%;
  }
  img {
    width: 100%;
    height: 100%;
  }
}
.fenlei {
  width: 100%;
  height: 160rpx;
  display: flex;
  justify-content: space-between;
  margin: 30rpx 0;
  img {
    width: 160rpx;
    height: 160rpx;
  }
}
.lou {
  margin-bottom: 30rpx;
  padding-left: 15rpx;
}
.lou:nth-child(3) {
  margin-bottom: 0rpx;
}
.lou_title {
  img {
    width: 100%;
    height: 120rpx;
  }
}
.lou_con {
  display: flex;
  justify-content: space-between;
  .lou_con_right {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    img {
      height: 188rpx;
    }
  }
}
</style>
